import React, { Component } from "react"
import { inject, observer } from "mobx-react"
import Styles from '@/scss/froms.scss'
//引入组件
import FromDefault from '@/pages/components/rights/from/from_reveal/fromdefault'
import FromNav from '@/pages/components/rights/from/from_nav/fromnav'
import FromInput from '@/pages/components/rights/from/from_input/frominput'
//引入常量
import CONSTS from "@/inits/consts"
//引入自己的工具包
import dateUtils from "@/utils/dateutils"
/***********************    此处练习props传值,将全部使用props传值,可以优化为内部注入     ************************************** */
@inject('store')
@observer
/* 这是FROM表单组件 */
class Froms extends Component<IStorePropsType, any>{
  //1、 获取表单时间 
  onOkTime = (value: timeType) => {
    if (value) this.props.store.onChangefromTodoTime(value[0]._d.getTime(), value[1]._d.getTime())
  }
  //2、绑定输入框内容
  onChangeValue = (e: IeventType) => {
    this.props.store.onChangefromTodoContent(e.target.value) //调用store 表单绑定value以及时间修改方法
  }

  //3、提交函数 此处将会判断是提交表单还是修改表单
  hadleSubmit = () => {
    let todo = this.props.store.thistodo
    if (todo.content.trim().length == 0 || !todo.start || !todo.deadline) {//判断输入是否为空,并且不能只有空格
      alert("有部分内容未填写,请填写完整再提交")
    } else {
      //这一步是添加历史更新时间与操作记录,拓展功能时候使用,表单是i先修改到thistodo中,在store会将thistodo赋值到todos中
      todo.updatetime.unshift({ updatetime: new Date().getTime().toString(), updatestate: this.props.store.nowstate }) //这一步是添加历史更新时间与操作记录,拓展功能时候使用
      todo.collect = false //收藏状态默认为false
      //判断为创建表单或者是更新表单,进行不同的操作与渲染
      switch (this.props.store.nowstate) {
        case CONSTS.FROMTYPE.CREATE: //当前状态如果是创建,
          todo.id = dateUtils.newId()//调用工具类的  生成id
          this.props.store.addTodos(todo)//调用store 往todos添加todo方法
          this.props.store.changeVisible()//调用store 修改显示与隐藏方法
          alert("提交成功")
          break;
        case CONSTS.FROMTYPE.UPDATE:///当前状态如果是修改
          this.props.store.updateTodos(todo)//调用store 修改todos中的某个todo方法
          this.props.store.changeVisible()//调用store 修改显示与隐藏方法
          alert("修改成功")
          break;
        default: //其他状态,用来防止误差
          this.props.store.changeVisible()//调用store 修改显示与隐藏方法
          break;
      }
    }
  }
  //4.修改表单显示隐藏
  changeVisible = () => {
    this.props.store.changeVisible()//调用store 修改显示与隐藏方法
  }
  //5、点击将其移入回收站
  handleMoveRecyle = (id: string, state: string) => {
    this.props.store.updateTodoState(id, state) //调用store修改状态
    this.props.store.changeVisible();//调用store 修改显示隐藏
    state == CONSTS.STATE.DELETE ? alert("成功移入回收站") : alert("还原成功")
  }
  //6、 用来修改收藏状态函数
  handleCollect = (id: string, state: string) => {
    this.props.store.updateTodoState(id, state) //调用store 修改状态函数
  }
  getCollectByID = (id: string) => {
    return this.props.store.getCollectByID(id)
  }


  render() {
    return (
      <div className={Styles.from_box}>
        {/*一、 表单导航栏,传入表单提交函数与隐藏表单函数   start当为undefined就是创建时候,以此渲染  */}
        {<FromNav
          todo={this.props.todo}
          start={this.props.store.thistodo.start}
          hadleSubmit={this.hadleSubmit}
          changeVisible={this.changeVisible}
          handleMoveRecyle={this.handleMoveRecyle}
          handleCollect={this.handleCollect}
          getCollectByID={this.getCollectByID}

        />}

        {/*二、 表单输入,传入绑定的value,获取表单时间函数 以及默认的开始结束时间(如果没有会显示默认提示语) ,绑定输入框内容 */}
        {<FromInput
          start={this.props.store.thistodo.start}
          deadline={this.props.store.thistodo.deadline}
          content={this.props.store.thistodo.content}
          onOkTime={this.onOkTime}
          onChangeValue={this.onChangeValue} />}

        {/*三、 表单数据默认显示 传入store的isShow thistodo.start当为undefined就是创建时候,以此渲染 以及移入回收站方法  以及当前点击的todo*/}
        { <FromDefault thistodo={this.props.store.thistodo}
          isShow={this.props.store.isShow}
          todo={this.props.todo}
          handleMoveRecyle={this.handleMoveRecyle}
          hadleSubmit={this.hadleSubmit}
        />}
      </div>
    )
  }
}
export default Froms


